//导入用到的组件
import {comp2List,comp2Card}  from 'http://localhost:10002/comp2/index.js'
import {comp3Chat,comp3Title} from 'http://localhost:10003/comp3/index.js'

const {createApp, onMounted,ref,watch ,toRefs,computed,reactive,defineAsyncComponent,getCurrentInstance  }  =Vue
const {createRouter, createWebHashHistory  }  =VueRouter
const myFooter='my-footer.html';

//vue 配置
const vueConfig= {
        setup(props,{attrs,emit,slots}) {
           const state = reactive({
                currentTab: '/'
               ,title:"微前端 云组件 组件云"    
           })
            
           return {
                ...toRefs(state)
           }
        }
        ,components:{
            'my-footer':defineAsyncComponent(xue.vload(myFooter))//1.局部组件<----------
        }
        ,methods:{
           changeTab:function(tabName,target){
               this.currentTab=tabName;
               document.querySelector(".active").classList.toggle("active");
               target.classList.add("active");
               this.$router.push({path:tabName});
           }
        }
 }


//路由表
const routes = [
   { path: '/'            , component: xue.vload(comp2List)  } //2.路由组件 <----------
  ,{ path: '/chat'        , component: xue.vload(comp3Chat)  }
  ,{ path: '/card'        , component: xue.vload(comp2Card)  }
]

//创建路由
const router = createRouter({
  history: createWebHashHistory(),
  routes
})




//应用初始化
function init(){
        //创建vue 应用
        let vueApp=createApp(vueConfig);
        //加载路由
        vueApp.use(router);
        //3.应用内全局组件<----------
        vueApp.component("comp3-title", defineAsyncComponent (xue.vload(comp3Title)));
        //渲染dom
        vueApp.mount('#app');
}


 const application={
      init
 }
 export default application

